page {
  --text-color: #000;
  --bg-color: #fff;
  --bg-grey: #f3f3f8;
  --bg-block: #f3f3f8;
  --bg-alpha: rgb(255 255 255 / 25%);
  --bg-dialog: #fff;
  --bg-control: #efeef4;
  --bg-hover: rgb(0 0 0 / 10%);
  --border-color: #cccccf;
  --grey: #888;
  --grey3: #333;
  --grey4: #444;
  --dark-grey: #666;
  --light-grey: #999;
  --arrow-color: #c5c5c7;
  --soft-shadow: rgb(191 192 195 / 15%);
  --hard-shadow: #f0f1f2;
  --action-color: #3478f7;
  --theme-color: #41c88a;

  @media (prefers-color-scheme: dark) {
    --text-color: #fff;
    --bg-color: #000;
    --bg-grey: #000;
    --bg-block: #1c1c1e;
    --bg-alpha: rgb(0 0 0 / 25%);
    --bg-dialog: #1c1c1e;
    --bg-control: #000;
    --bg-hover: rgb(255 255 255 / 10%);
    --border-color: #3a3a3d;
    --grey: #777;
    --grey3: #ccc;
    --grey4: #bbb;
    --dark-grey: #999;
    --light-grey: #666;
    --arrow-color: #5a5a5f;
    --soft-shadow: rgb(64 63 60 / 15%);
    --hard-shadow: #282a32;
  }
}

.grey {
  --bg-block: #fff;

  @media (prefers-color-scheme: dark) {
    --bg-block: #1c1c1e;
  }
}
